<template>
  <div>
    <el-card shadow="never">
      <div class="title">订单数量</div>
      <div ref="orderNumber" class="h-[350px]"></div>
    </el-card>
  </div>
</template>

<script setup>
import { useDebounceFn } from '@vueuse/core';
import * as echarts from 'echarts';
const orderNumber = ref();
const props = defineProps({
  sesstingList: {
    type: Array,
    default: () => []
  },
  dateTimeList: {
    type: Array,
    default: () => []
  }
});
const isFirst = ref(true);
const newSesstingList = computed(() => {
  if (props.sesstingList) {
    return JSON.parse(JSON.stringify(props.sesstingList));
  }
  return [];
});

const debouncedFn = useDebounceFn(() => {
  initOrderNumber();
}, 500);

let myChart = null;
const initOrderNumber = () => {
  if (myChart) {
    myChart.dispose();
  }
  myChart = echarts.init(orderNumber.value);
  let legends = newSesstingList.value.map((item) => item.title);
  let seriesData = newSesstingList.value.map((item) => {
    item.name = item.title;
    item.type = 'line';
    item.smooth = true;
    item.data = item.orderNumData;
    item.label = '';
    return item;
  });
  let option = {
    xAxis: {
      type: 'category',
      data: props.dateTimeList,
      axisTick: {
        show: false
      },
      boundaryGap: false
    },
    yAxis: {
      type: 'value'
    },
    grid: {
      left: 20,
      right: 40,
      bottom: 20,
      top: 30,
      containLabel: true
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross'
      },
      padding: [5, 10]
    },
    yAxis: {
      axisTick: {
        show: false
      }
    },
    legend: {
      data: legends
    },
    series: seriesData
  };
  option && myChart.setOption(option);
};

onMounted(() => {
  window.addEventListener('resize', () => {
    myChart?.resize();
  });
});

defineExpose({ init: initOrderNumber });
</script>

<style lang="scss" scoped></style>
